<!-- 排班管理 -->
<template>
  <div class="dashboard-container operational-range customer-list-box">
    <div class="app-container">
      <!-- 卡片 -->
      <el-card
        class="search-card-box"
        shadow="never"
      >
        <!-- 表单 -->
        <el-form
          ref="formData"
          :model="formData"
          label-width="80px"
        >
          <el-row :gutter="60">
            <!-- 员工账号 -->
            <el-col :span="8">
              <el-form-item
                label="员工账号:"
                prop="employeeNumber"
                style="margin-bottom: 20px"
              >
                <!-- clearable可以清空 -->
                <el-input
                  v-model="formData.employeeNumber"
                  clearable
                  placeholder="请输入员工账号"
                />
              </el-form-item>
            </el-col>
            <!-- 员工姓名 -->
            <el-col :span="8">
              <el-form-item
                label="员工姓名:"
                prop="name"
                style="margin-bottom: 20px"
              >
                <!-- clearable可以清空 -->
                <el-input
                  v-model="formData.name"
                  clearable
                  placeholder="请输入员工姓名"
                />
              </el-form-item>
            </el-col>
            <!-- 工作模式 -->
            <el-col :span="8">
              <el-form-item
                label="工作模式:"
                prop="workPatternId"
                style="margin-bottom: 20px"
              >
                <el-select
                  v-model="formData.workPatternId"
                  placeholder="请选择工作模式"
                >
                  <el-option
                    v-for="item in workManageList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 月份 -->
            <el-col :span="8">
              <el-form-item
                label="月份:"
                prop="month"
                style="margin-bottom: 20px"
              >
                <el-date-picker
                  v-model="formData.month"
                  type="month"
                  placeholder="请选择月份"
                  value-format="yyyy-MM"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <!-- 所属机构 -->
            <el-col :span="8">
              <el-form-item
                label="所属机构:"
                prop="agencyId"
                style="margin-bottom: 0px"
              >
                <!-- <el-select
                  ref="selectTree"
                  v-model="formData.agencyId"
                  filterable
                  placeholder="请选择所属机构"
                >
                  <el-option
                    :value="agencyOptions"
                  >
                    <el-tree
                      :data="agencyOptions"
                      node-key="agencyId"
                      :props="{label:'name'}"
                    >
                    </el-tree>
                  </el-option>
                </el-select> -->
                <treeselect
                  v-model="formData.agencyId"
                  :options="agencyOptions"
                  :normalizer="normalizer"
                  :searchable="true"
                  style="width: 100%"
                  placeholder="请输入所属机构"
                  @open="open"
                  @close="close"
                  @input="treenodeChange"
                />
                <img
                  ref="arrow"
                  src="../../assets/pullDown.png"
                  style="position:absolute;width:18px;height:18px;right:9px;top:12px;cursor:pointer;pointer-events:none;transition-duration:0.3s"
                />
              </el-form-item>
            </el-col>
            <!-- 搜索功能 -->
            <el-col :span="8">
              <el-button
                type="warning"
                style="margin: top 20px;"
                @click="handleFilter"
              >搜索</el-button>
              <el-button
                plain
                class="reset-btn"
                @click="resetForm('formData')"
              >重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <!-- 下方表格 -->
      <el-card
        class="table-card-box"
        shadow="never"
      >
        <!-- toWorkArrangeSetting跳转到别的页面 -->
        <el-button
          type="warning"
          style="margin-bottom: 20px;"
          @click="toWorkArrangeSetting"
        >
          排班设置
        </el-button>
        <el-button
          type="warning"
          plain
          style="margin-bottom: 20px;"
          @click="openPeopleSettingModal"
        >
          绑定排班
        </el-button>
        <!-- 表格 -->
        <!-- fit 列的宽度自动撑开 stripe斑马条纹表格 -->
        <!-- 监听复选框选中事件 复选框改变状态触发事件 -->
        <el-table
          :key="tableKey"
          ref="multipleTable"
          :data="dataList"
          fit
          style="width: 100%"
          stripe
          @selection-change="handleSelectionChange"
        >
          <!-- 全选框 -->
          <el-table-column
            align="left"
            type="selection"
            width="60"
            fixed
          >
          </el-table-column>
          <!-- 员工账号 -->
          <el-table-column
            align="left"
            label="员工账号"
            width="100"
            fixed
            prop="employeeNumber"
          >
          </el-table-column>
          <el-table-column
            align="left"
            label="员工姓名"
            width="100"
            fixed
            prop="name"
          >
          </el-table-column>
          <el-table-column
            align="left"
            label="员工电话"
            width="100"
            fixed
            prop="phone"
          >
          </el-table-column>
          <el-table-column
            align="left"
            label="员工角色"
            width="100"
            fixed
            prop="userType"
          >
            <template v-slot="scope">
              <span>
                {{ scope.row.userType === 1 ? '员工' : scope.row.userType === 2 ? '快递员' : '司机' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="当前工作模式"
            width="110"
            fixed
            prop="workPatternName"
          >
          </el-table-column>
          <el-table-column
            v-for="(item, index) in dateList.length"
            :key="item.index"
            :label="String(index+1)"
          >
            <template v-slot="scope">
              <div
                :class="{
                  work: scope.row.workSchedules[index],
                  rest: !scope.row.workSchedules[index]
                }"
              >
                {{ scope.row.workPatternName?scope.row.workSchedules[index] ? '上' : '休': '无' }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <div
            v-show="dataList && dataList.length > 0"
            class="pages"
          >
            <!-- 分页 -->
            <el-pagination
              :current-page="Number(formData.page)"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="Number(total)"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </el-card>
    </div>
    <!--绑定排班弹框 -->
    <el-dialog
      title="人工调整"
      :visible.sync="dialogVisible"
      width="566px"
      height="300px"
      class="workArrange-manage-people-setting"
    >
      <el-form label-width="90px">
        <el-form-item class="work-type">
          <el-radio
            v-model="radio"
            label="1"
            @change="handleWorkType"
          >礼拜制</el-radio>
          <el-radio
            v-model="radio"
            label="2"
            @change="handleWorkType"
          >连续制</el-radio>
        </el-form-item>
        <el-form-item
          label="模式名称:"
          prop="workPatternId"
        >
          <el-select
            v-model="workHistoryId"
            placeholder="请选择工作模式"
          >
            <el-option
              v-for="item in workManageList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          type="warning"
          class="save-btn"
          size="medium"
          @click="confirm"
        >确认</el-button>
        <el-button
          plain
          class="cancel-btn"
          @click="handleClose"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getWorkPatterns, agencyList, workManage, peopleSet } from '@/api/workPatterns.js'
// 引入树形下拉框
import Treeselect from '@riophae/vue-treeselect'
// 引入树形下拉框样式
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { transListToTreeData } from '@/utils/tree'
export default {
  components: {
    Treeselect
  },
  data() {
    return {
      formData: {
        page: 1,
        pageSize: 10,
        workPatternId: '',
        name: '',
        employeeNumber: '',
        agencyId: null,
        organization: '',
        month: ''
      },
      workManageList: [],
      agencyOptions: [],
      tableKey: 0,
      dataList: [],
      total: null,
      dialogVisible: false,
      workHistoryId: '',
      radio: '1',
      multipleSelection: [],
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      dateList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]
    }
  },
  created() {
    this.getWorkPatterns()
    this.agencyList()
    this.getTableList()
  },
  methods: {
    treenodeChange(value) {
      this.organization = value
    },
    open() {
      this.$refs.arrow.style.transform = 'rotate(-180deg)'
    },
    close() {
      this.$refs.arrow.style.transform = 'rotate(0deg)'
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.formData.pageSize = val
      console.log(this.formData)
      this.getTableList(this.formData)
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.formData.page = val
      this.getTableList()
    },
    // 获取工作模式
    async getWorkPatterns() {
      const { data: res } = await getWorkPatterns()
      this.workManageList = res[1].concat(res[2])
    },
    // 获取树状机构
    // eslint-disable-next-line vue/no-dupe-keys
    async agencyList() {
      const { data } = await agencyList()
      // console.log(arr)
      const list = JSON.parse(data)
      const val = transListToTreeData(list, 0)
      this.agencyOptions = val
    },
    // 获取表格数据
    async getTableList() {
      const { data } = await workManage(this.formData)
      console.log(data)
      this.dataList = data.items || []
      this.total = data.counts
    },
    // 重置表单
    resetForm() {
      this.$refs.formData.resetFields()
      this.getTableList()
    },
    // 搜索
    handleFilter() {
      this.formData.page = 1
      this.getTableList(this.formData)
    },
    // 绑定排班 如果什么都没有选中则提示选择人
    openPeopleSettingModal() {
      if (!this.multipleSelection.length) {
        return this.$message.error('请选择调整人员')
      }
      this.dialogVisible = true
    },
    // 更改选中的内容
    handleWorkType(val) {
      this.radio = val
    },
    // 复选框改变事件 拿到选中的id 把id赋值给multipleSelection数组
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val.map(item => item.id)
    },
    // 绑定排班确认
    async confirm() {
      // 没有选择工作模式提示选择
      if (!this.workHistoryId) {
        this.$message.error('请选择工作模式')
      }
      // 把排班id用户类型 工作模式id 工作模式类型传进去
      await peopleSet({
        workPatternId: this.workHistoryId,
        userIdList: this.multipleSelection,
        workPatternType: this.radio
      }).then((res) => {
        if (res.code === 200) {
          // 成功之后关闭弹窗 重新渲染
          this.$message.success('操作成功')
          this.handleClose()
          this.getTableList()
          this.radio = '1'
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    // 绑定排版取消
    handleClose() {
      this.dialogVisible = false
      this.radio = '1'
      this.getWorkPatterns(this.radio)
      this.workHistoryId = ''
    },
    toWorkArrangeSetting() {
      this.$router.push('workArrange-setting')
    }
  }
}

</script>

<style lang="scss" scoped>
  .el-select {
    width: 100%;
  }
  .el-table {
    height: 100%;
  }
    ::v-deep .el-table__fixed { // 左固定列
      height: 100% !important;
    }
  .el-card {
    margin-bottom: 20px;
    overflow: initial;
  }
  .rest {
    width: 24px;
    height: 24px;
    background: #eff3f8;
    border: 1px solid #d8dde3;
    border-radius: 50%;
    text-align: center;
    color: #20232a;
    font-size: 13px;
  }
  .work {
    width: 24px;
    height: 24px;
    background: #ffeeeb;
    border: 1px solid #e15536;
    border-radius: 50%;
    text-align: center;
    color: #e15536;
    font-size: 13px;
  }
  .pagination {
  margin-top: 40px;
}
.workArrange-manage-people-setting {
   .el-dialog__body {
    padding: 30px 50px 10px 50px !important;
  }
   .el-dialog__footer {
    padding-bottom: 40px;
  }
}
::v-deep.work-type {
   .el-form-item__content {
    margin-left: 40px !important;
    .el-form-item {
      margin-top: 40px;
      margin-right: 40px;
    }
  }
   .el-radio:first-child {
    margin-right: 80px !important;
  }
  .el-radio__label {
    font-weight: bold;
    color: #333333;
  }

  .el-select {
    width: 293px;
  }
}
::v-deep.el-radio {
  margin-left: 58px;
  .el-button {
    width: 70px;
    height: 36px;
    padding: 10px 20px;
  }
}

</style>
